<template>
    <div>
        <el-dialog :title="isAdd ? '添加管理员' : '编辑管理员'" :visible.sync="zhe" :before-close="close">
            <el-form ref="form" :model="form" label-width="80px" :rules="rules">

                <el-form-item label="所属角色" prop="roleid">
                    <el-select placeholder="请选择" v-model="form.roleid">

                        <el-option v-for="item in $store.getters['role/getRole']" :key="item.id" :label=item.rolename
                            :value=item.id></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="用户名称" prop="username">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>

                <el-form-item label="密码">
                    <el-input v-model="form.password"></el-input>
                </el-form-item>

                <el-form-item label="状态">
                    <el-switch v-model="form.status" :active-value="1" :inactive-value="2"></el-switch>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submit">确定</el-button>
                    <el-button @click="close">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import { userinfo, useradd, useredit } from "../../request/api"
export default {
    data() {
        return {
            form: {
                password: "",
                username: "",
                roleid: '',
                status: 1
            },
            status: false,
            options: [
                {
                    value: 1,
                    label: "系统管理",
                },
                {
                    value: 2,
                    label: "商城管理",
                },
            ],
            rules: {
                username: [
                    { required: true, message: "请输入用户名", trigger: "blur" },
                    { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
                ],
                roleid: [{ required: true, message: "请选择所属角色", trigger: "change" }],
            },
        }
    },
    props: ["zhe", "isAdd"],
    methods: {
        submit() {
            if (this.isAdd) {
                this.$refs.form.validate((val) => {
                    if (val) {
                        // console.log(this.form);
                        useradd(this.form).then(res => {
                            // console.log(res);
                            if (res.code == 200) {
                                this.$message(res.msg);
                                this.$store.dispatch("user/getUserListActions")
                                this.$store.dispatch("user/getUserCount")
                                this.close(),
                                this.reset()
                            } else {
                                this.$message.error(res.msg);
                            }

                        })

                    }
                })
            } else {
                useredit(this.form).then(res => {
                    // console.log(res);
                    if (res.code == 200) {
                        this.$message(res.msg);
                        this.$store.dispatch("user/getUserListActions")
                        this.close(),
                            this.reset()
                    } else {
                        this.$message.error(res.msg);
                    }

                })
            }

        },
        close() {
            this.$emit("close")
            this.reset()
        },
        // 表单清空事件
        reset() {
            // 清空表单数据
            this.form = {
                password: "",
                rolename: ""
            },
                //清空正则验证
                this.$refs.form.resetFields()

        },
        //数据回显
        lookup(uid) {
            // console.log(uid);
            // 请求单条数据
            userinfo({ uid }).then(res => {
                // console.log(res);
                this.form = res.list
                this.form.password = ""
            })

        }
    },
    mounted() {
        if (this.$store.getters["role/getRole"].length == 0) {
            // 调用菜单行动
            this.$store.dispatch("role/getRoleActions")
        }


    },
    watch: {},
    computed: {},
    filters: {},
    components: {}
}
</script>
<style scoped></style>
